<!-- #V2G功能 -->
<template>
  <view :style="objColor" class="page-container">
    <view class="header-box">
      <view class="title">已开通V2G的爱车</view>
      <view class="add-box" @click="toAddCar">
        <image :src="mixIconList[2] && mixIconList[2].icon" class="img-add"></image>
        <text class="add-text">添加爱车</text>
      </view>
    </view>
    <view v-if="carList.length > 0" class="list-container">
      <view v-for="(item, index) in carList" :key="index" class="item-card">
        <view class="info-box">
          <image :src="item.url" class="img-car"></image>
          <view>
            <text class="text1">{{ item.plateNo }}</text>
            <text class="text2">{{ item.brandName || item.carTypeName ? '| ' : '' }}{{ item.brandName || '' }}{{
              item.carTypeName || '' }}</text>
          </view>
        </view>
        <view class="line"></view>

        <view class="action-box">
          <view class="left">
            <text class="label">V2G</text>
            <u-switch v-model="item.disCharge" size="44" :active-color="objColor2.btnColor"
              @change="changeSwitch(item, index)"></u-switch>
          </view>
          <view class="right" @click="onSetDischarge(item, index)">
            <u-icon :color="objColor2.textColor" size="28" name="setting"></u-icon>
            <text class="text3">放电设置</text>
          </view>
        </view>
      </view>
    </view>

    <template v-if="carList.length <= 0 && loading">
      <Upgrading text="暂无开通v2g的爱车"></Upgrading>
    </template>

    <u-modal title="放电设置" :show="showModal" :closeOnClickOverlay="true" :confirm-color="objColor2.textColor"
      @close="showModal = false" @confirm="confirmModal">
      <view class="set-list">
        <view class="set-label">最大放电限度:</view>
        <view class="listVal">
          <picker :value="formData.dischargeSoc" :range="perArray" range-key="name" @change="bindPercent">
            <view class="picker-box">
              <view v-if="formData.dischargeSoc">{{ formData.dischargeSoc }}%</view>
              <view class="placeholder" v-else>请选择</view>
              <image class="right-icon" src="https://oos-cn.ctyunapi.cn/front-end/static/mine/images/back.png">
              </image>
            </view>
          </picker>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import https_1 from '@/api/https.js'
import Upgrading from '../../../components/upgrading/upgrading';

export default {
  components: {
    Upgrading
  },

  data() {
    return {
      loading: false,
      carList: [],
      showModal: false,
      formData: {},
      itemIndex: null,
      perArray: [
        { name: "10%", value: '10' },
        { name: "20%", value: '20' },
        { name: "30%", value: '30' },
        { name: "40%", value: '40' },
        { name: "50%", value: '50' },
        { name: "60%", value: '60' },
        { name: "70%", value: '70' },
        { name: "80%", value: '80' },
        { name: "90%", value: '90' },
        { name: "95%", value: '95' },
      ]
    };
  },

  onShow() {
    this.getVehicleList();
  },

  methods: {
    //我的车辆列表
    getVehicleList() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      });
      this.loading = false
      https_1.getVehicleList().then((res) => {
        if (res.code == 0) {
          this.carList = res.data.map(item => {
            item.isFlag = false
            return item
          })
          uni.hideLoading()
          this.loading = true
        }
      });
    },

    updateCarOption(key) {
      uni.showLoading({
        title: '设置中...',
        mask: true
      });

      const item = this.formData
      let params = {
        id: item.id,
        plateNo: item.plateNo,
      }

      params[key] = item[key]

      https_1.updateVehicleInfo(params).then((res) => {
        if (res.code == 0) {
          uni.hideLoading()
          setTimeout(() => {
            uni.showToast({
              title: "成功",
              icon: "success",
              duration: 2000,
            });
            this.showModal = false
            setTimeout(() => {
              this.getVehicleList()
            }, 500);
          }, 100);
        } else {
          uni.hideLoading()
          setTimeout(() => {
            if (key === 'disCharge') {
              this.carList[this.itemIndex].disCharge = !item.disCharge
            }
            uni.showModal({
              title: "提示",
              content: res.msg,
              showCancel: false
            });
          }, 100);
        }
      });
    },

    onSetDischarge(item, index) {
      this.showModal = true;
      this.formData = item
      this.itemIndex = index
    },

    bindPercent(e) {
      const { value } = e.detail
      this.formData.dischargeSoc = this.perArray[value].value
    },

    // 改变开关状态
    changeSwitch(item, index) {
      this.formData = item
      this.itemIndex = index
      this.updateCarOption('disCharge')
    },

    confirmModal() {
      this.updateCarOption('dischargeSoc')
    },

    toAddCar() {
      uni.navigateTo({
        url: '/mine/pages/addCar/addCar'
      });
    }
  },
};
</script>
<style lang="less" scoped>
.page-container {
  background: #f5f6fa;
  min-height: 100vh;
  padding-bottom: 32rpx;
  box-sizing: border-box;

  .header-box {
    padding: 24rpx;
    display: flex;
    justify-content: space-between;

    .title {
      font-weight: 400;
      font-size: 26rpx;
      color: #303133;
    }

    .add-box {
      display: flex;
      align-items: center;
    }

    .img-add {
      width: 24rpx;
      height: 24rpx;
    }

    .add-text {
      font-weight: 400;
      font-size: 24rpx;
      color: var(--textColor);
      margin-left: 8rpx;
    }
  }

  .list-container {
    padding: 0 24rpx;
    margin-top: 20rpx;

    .item-card {
      padding: 32rpx;
      width: 638rpx;
      height: 309rpx;
      background: linear-gradient(360deg,
          #ffffff 0%,
          #ffffff 31%,
          #f4f6f8 99%,
          #f4f6f8 100%);
      box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 2rpx solid #ffffff;
      margin-bottom: 40rpx;

      .info-box {
        display: flex;
        flex-direction: column;
        align-items: center;

        .img-car {
          width: 400rpx;
          height: 152rpx;
          margin-bottom: 20rpx;
        }

        .text1 {
          font-size: 26rpx;
          font-weight: 400;
          color: #303133;
        }

        .text2 {
          margin-left: 10rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #909399;
        }
      }

      .line {
        width: 638rpx;
        height: 1rpx;
        background: #dcdfe6;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        margin: 20rpx 0 0;
      }
    }
  }

  .action-box {
    display: flex;
    justify-content: space-between;
    padding-top: 32rpx;

    .left {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 24rpx;

      .label {
        font-weight: 400;
        font-size: 24rpx;
        color: #909399;
        margin-right: 16rpx;
      }
    }

    .right {
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 24rpx;

      .text3 {
        color: var(--textColor);
        margin-left: 8rpx;
      }
    }
  }
}
</style>
<style lang="less" scoped>
@import "../../../commin/commin.less";

.set-list {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
  width: 100%;

  .set-label {
    flex-shrink: 0;
    margin-right: 32rpx;
  }

  .listVal {
    flex: 1;
    background: rgba(192, 196, 204, 0.0588);
    border-radius: 10rpx;
    border: 1rpx solid #C0C4CC;
    box-sizing: border-box;
    padding: 0 32rpx 0 20rpx;

    .picker-box {
      width: 100%;
      height: 64rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 26rpx;
      color: #606266;
      line-height: 26rpx;
    }

    .right-icon {
      width: 12rpx;
      height: 24rpx;
      transform: rotate(90deg);
    }
  }
}
</style>
